<template>
  <div class="home">
    <el-container>
      <el-aside width="200px">
        <!-- 导入侧标栏组件 -->
        <asideCom :isCollapse="isCollapse"></asideCom>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 头部左侧 -->
          <el-icon :size="30">
            <Fold />
          </el-icon>
          <!-- 头部右侧 -->
          <el-space>
            <span> 欢迎您: {{ username }} </span>
            <div>
              <el-dropdown>
                <el-avatar shape="square" :size="40" :src="squareUrl" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>设置</el-dropdown-item>
                    <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-space>
        </el-header>
        <!-- 主体内容 -->
        <el-main>
                  <!-- 面包屑导航 -->
                  <el-breadcrumb separator="/" class='bread'>
                    <el-breadcrumb-item v-for="item in navList" :key='item.path'>{{item.meta.name}}</el-breadcrumb-item>
                  </el-breadcrumb>
          <!-- 放二级路由的坑 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 引入图标
import { Fold } from "@element-plus/icons-vue";
// 引入辅助函数
import { mapState, mapMutations } from "vuex";
// 引入二级组件
import asideCom from "@/components/asideCom.vue";

export default {
  data() {
    return {
      // 头像地址
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        // 面包屑导航的路由数组,拼接这个数组
        navList:[],
        isCollapse:false
    };
  },

  //  注册组件
  components: {
    Fold,
    asideCom,
  },

  computed: {
    ...mapState(["username"]),
  },


  watch:{
    // 监听实例对象上属性的变化，实时更新面包屑导航，不用再重新刷新
    $route:{
      // 因为是复杂数据类型，所以使用深度监听
      handler(val){
        this.navList=[],//先清空
        val.matched.forEach((item,index)=>{
          // 第一项路由没用
          if(index>0){
            this.navList.push(item)
          }
        })
      },
      deep:true,
      immediate:true
    }
  },

  methods: {
    ...mapMutations(["updateUsername", "updataRole", "updateCheckedkeys"]),

    //  退出登录
    loginOut() {
      //  清空vuex中的用户名，角色，权限，清空本地的token值
      this.updateUsername("");
      this.updataRole("");
      this.updateCheckedkeys("");
      localStorage.removeItem("token");
      //回到登录页
      this.$router.push("/login");
    },

  },
};
</script>


<style lang="scss" scoped>
.home,
.el-container {
  width: 100%;
  height: 100%;
  .el-aside {
    color: white;
  }
  .el-header {
    background-color: rgb(41, 163, 245);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .el-main {
    background-color: rgb(245, 247, 239);
  }
  .el-dropdown-link {
    width: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .bread{
    margin-bottom: 20px;
  }

}
</style>
